<!--  -->
<template>
  <div style="padding: 15px 30px">
    <el-table border :data="m_TableData">
      <template v-for="(col, i) in Columns">
        <template v-if="col.children">
          <el-table-column :label="col.label" :key="i" :align="col.align">
            <el-table-column v-for="(col2, j) in col.children" :key="j" :prop="col2.prop" :label="col2.label" :width="col2.width ? col2.width : null" :align="col2.align ? col2.align : null">
              <template slot-scope="scope">
                <div>{{ col2.customRender ? col2.customRender(scope, scope.row, scope.row[col2.prop]) : scope.row[col2.prop] }}</div>
              </template>
            </el-table-column>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column :key="i" :prop="col.prop" :label="col.label" :width="col.width ? col.width : null" :align="col.align ? col.align : null">
            <template slot-scope="scope">
              <div>{{ col.customRender ? col.customRender(scope, scope.row, scope.row[col.prop]) : scope.row[col.prop] }}</div>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>

    <!-- <div style="text-align: center; margin-top: 20px; display: flex; justify-content: flex-end">
      <el-pagination background layout="total, prev, pager, next" :total="m_QueryParams.total" :current-page.sync="m_QueryParams.currentPage" :page-size="m_QueryParams.pageSize" @current-change="currentchange"> </el-pagination>
    </div>-->
    <el-dialog title="弹窗模板" width="50%" :close-on-click-modal="false">
      <span slot="footer" class="dialog-footer"><el-button size="small">取 消</el-button> <el-button size="small" type="primary">保存</el-button> </span>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import Api from '../../api/dataCenter';
export default {
  components: {},
  data() {
    return {
      m_QueryParams: { total: 0, currentPage: 1, pageSize: 10 },
      m_TableData: [{ xm: '北京阳光大厦', Q1A: '¥14,126,278', Q2A: '¥14,297,852', Q3A: '¥14,440,831', Q4A: '¥14,154,873', Q1B: '91.24%', Q2B: '92.35%', Q3B: '93.27%', Q4B: '91.42%', Q1C: '78.19%', Q2C: '79.14%', Q3C: '79.93%', Q4C: '78.35%' }],
      m_Data: null,
    };
  },
  filters: {},
  //监听属性 类似于data概念
  computed: {
    Columns() {
      let align = 'center';
      let width = null;
      let columns = [
        // {
        //   label: '项目',
        //   prop: 'xm',
        //   align: align,
        //   width: '200',
        // },
      ];

      if (this.m_Data) {
        this.m_Data.headerList.forEach(Header => {
          let header = {
            label: Header.columnGroupName,
            align: align,
            children: [],
          };
          Header.columnHeaders.forEach(columnHeader => {
            header.children.push({
              label: columnHeader.tableHeaderName,
              align: align,
              prop: columnHeader.tableHeaderKey,
              width: '100',
              customRender: (scope, row, text) => {
                return text.dataValue;
              },
            });
          });
          columns.push(header);
        });
      }
      return columns;
    },
  },
  //监控data中的数据变化
  watch: {},
  //接收参数
  props: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.GetData();
  },
  //方法集合
  methods: {
    GetData() {
      Api.GetCompareResult({ ...JSON.parse(localStorage.getItem('serchAssetForm')) }).then(res => {
        if (res.success) {
          this.m_Data = res;
          this.m_TableData = [];
          res.rows.forEach(row => {
            this.m_TableData.push(row.columnDataMap);
          });
          console.log(this.m_TableData);
        }
      });
    },
    currentchange(res) {
      this.m_QueryParams.currentPage = res;
    },
    TableEdit(row) {},
    TableDel(row) {},
  },
};
</script>
<style scoped>
::v-deep .el-divider {
  margin: 24px 0px;
}

.search-data-box {
  margin-top: 10px;
}
/* @import url(); 引入css类 */
</style>
